<template>
  <div class="bg-white rounded-xl shadow-sm p-6">
    <h3 class="text-lg font-semibold mb-4">作者专栏</h3>
    <div class="flex items-center mb-4">
      <img :src="author.avatar" :alt="`${author.name} - ${author.title}`" class="w-16 h-16 rounded-full object-cover">
      <div class="ml-4">
        <h4 class="font-medium text-gray-900">{{ author.name }}</h4>
        <p class="text-sm text-gray-600">{{ author.title }}</p>
        <p class="text-sm text-gray-500 mt-1">{{ author.stats }}</p>
      </div>
    </div>
    <p class="text-sm text-gray-700 mb-4">
      {{ author.bio }}
    </p>
    <button class="w-full py-2 text-center text-sm font-medium text-primary border border-primary rounded-md hover:bg-blue-50 transition-colors" @click="handleViewProfile">
      查看作者主页
    </button>
    
    <div class="mt-6">
      <h4 class="font-medium text-gray-800 mb-3">作者热门文章</h4>
      <div class="space-y-3">
        <a 
          v-for="(article, index) in popularArticles" 
          :key="index"
          href="#" 
          class="block group"
          @click.prevent="handleArticleClick(article)"
        >
          <h5 class="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors line-clamp-2">
            {{ article.title }}
          </h5>
          <p class="mt-1 text-xs text-gray-500">{{ article.stats }}</p>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AuthorColumn',
  props: {
    author: {
      type: Object,
      default: () => ({
        name: '张明',
        avatar: 'https://picsum.photos/id/1005/200/200',
        title: '职场沟通培训师 | 10年经验',
        stats: '已发表 86 篇文章 · 12.5k 粉丝',
        bio: '前500强企业人力资源总监，专注于职场沟通、团队管理和领导力发展领域，帮助 thousands of 职场人提升沟通效率。'
      })
    },
    popularArticles: {
      type: Array,
      default: () => [
        {
          title: '高效会议的7个秘诀：告别冗长无效的讨论',
          stats: '2.4k 阅读 · 1个月前'
        },
        {
          title: '跨文化职场沟通：如何与不同背景的同事有效协作',
          stats: '1.8k 阅读 · 2个月前'
        },
        {
          title: '从内向到善于沟通：性格内向者的职场表达技巧',
          stats: '3.1k 阅读 · 3个月前'
        }
      ]
    }
  },
  methods: {
    handleViewProfile() {
      // 查看作者主页的逻辑
      this.$emit('view-profile', this.author);
    },
    handleArticleClick(article) {
      // 点击热门文章的逻辑
      this.$emit('article-click', article);
    },
    setAuthor(author) {
      // 设置作者信息的逻辑
      this.$emit('update:author', author);
    },
    setPopularArticles(articles) {
      // 设置热门文章列表的逻辑
      this.$emit('update:popularArticles', articles);
    },
    refreshData() {
      // 刷新作者信息和热门文章列表的逻辑
      this.$emit('data-refreshed');
    }
  },
  lowcode: {
    meta: {
      componentKey: 'author-column',
      displayName: '作者专栏',
      description: '展示文章作者信息和热门文章',
      category: '文章组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基础配置',
        fields: [
          {
            name: 'author',
            label: '作者信息',
            type: 'object',
            description: '作者的详细信息',
            defaultValue: () => ({
              name: '张明',
              avatar: 'https://picsum.photos/id/1005/200/200',
              title: '职场沟通培训师 | 10年经验',
              stats: '已发表 86 篇文章 · 12.5k 粉丝',
              bio: '前500强企业人力资源总监，专注于职场沟通、团队管理和领导力发展领域，帮助 thousands of 职场人提升沟通效率。'
            })
          },
          {
            name: 'popularArticles',
            label: '热门文章列表',
            type: 'array',
            description: '作者的热门文章列表',
            defaultValue: () => [
              {
                title: '高效会议的7个秘诀：告别冗长无效的讨论',
                stats: '2.4k 阅读 · 1个月前'
              },
              {
                title: '跨文化职场沟通：如何与不同背景的同事有效协作',
                stats: '1.8k 阅读 · 2个月前'
              },
              {
                title: '从内向到善于沟通：性格内向者的职场表达技巧',
                stats: '3.1k 阅读 · 3个月前'
              }
            ]
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'view-profile',
        label: '查看作者主页',
        description: '点击查看作者主页按钮时触发',
        parameters: {
          author: 'object'
        }
      },
      {
        name: 'article-click',
        label: '点击文章',
        description: '点击热门文章时触发',
        parameters: {
          article: 'object'
        }
      }
    ],
    
    actions: [
      {
        name: 'setAuthor',
        label: '设置作者信息',
        description: '设置作者的详细信息',
        parameters: [
          {
            name: 'author',
            type: 'object',
            required: true,
            description: '新的作者信息'
          }
        ]
      },
      {
        name: 'setPopularArticles',
        label: '设置热门文章',
        description: '设置作者的热门文章列表',
        parameters: [
          {
            name: 'articles',
            type: 'array',
            required: true,
            description: '新的热门文章列表'
          }
        ]
      },
      {
        name: 'refreshData',
        label: '刷新数据',
        description: '刷新作者信息和热门文章列表',
        parameters: []
      }
    ]
  }
}
</script>

<style scoped>
/* 组件样式已通过Tailwind CSS实现 */
</style>